<template>
  <div class="page-container">
    <section
      class="pt-5 text-white"
      :style="{
        backgroundSize: 'cover',
        backgroundPosition: 'center',
        paddingBottom: '250px',
        backgroundImage: `url(${heroImage})`,
      }"
    >
      <div class="container">
        <nav class="navbar navbar-expand-lg navbar-dark" style="padding-left: 0">
          <h2>智言AI</h2>
          <button
            aria-controls="navbarSupportedContent"
            aria-expanded="false"
            aria-label="Toggle navigation"
            class="navbar-toggler ms-auto"
            data-target="#navbarSupportedContent"
            data-toggle="collapse"
            type="button"
          >
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="ms-2 navbar-nav ms-auto">
              <li class="nav-item active">
                <span class="nav-link">开放式API</span>
              </li>
              <li class="nav-item active">
                <span class="nav-link" @click="toAIPage">AI生图</span>
              </li>
              <li class="nav-item active">
                <span class="nav-link" href="#">代理加盟</span>
              </li>
            </ul>
            <button
              class="btn btn-lg rounded btn-warning text-blanchedalmond pe-4 ps-4 pt-2 pb-2 font-size-16 login-btn"
              @click="showLoginModal"
              v-if="!isLogin"
            >
              登录
            </button>
            <el-dropdown v-else trigger="click" @command="onLogout">
              <div class="user-info">
                <img src="~@/assets/images/home/avatar.png" />{{ userInfo.nickname }}
              </div>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item>退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </nav>
        <div class="row mb-0 pt-5 mt-5">
          <div class="col-md-7 mt-0 pt-5">
            <div>
              <h1 class="font-size-43">
                <span class="font-size-40" style="white-space: pre-wrap; color: white"
                  >服务于400+公司使用</span
                >
              </h1>
            </div>
            <div>
              <p class="font-size-19">
                <span class="font-size-23" style="white-space: pre-wrap">AI一键生图</span>
              </p>
            </div>
            <div>
              <p class="font-size-17 pt-5">
                <span class="mb-3 font-size-18" style="white-space: pre-wrap">Price:</span>
              </p>
            </div>
            <div>
              <h2 class="font-size-43 pb-2">
                <span class style="white-space: pre-wrap; color: #fff">$ 2.000.000</span>
              </h2>
            </div>
            <div></div>
            <button
              class="btn btn-lg rounded btn-warning text-blanchedalmond mt-3 pe-4 ps-4 pt-2 pb-2 font-size-16"
            >
              BOOK A VIEWING
            </button>
          </div>
        </div>
      </div>
    </section>
    <section class="bg-light pt-5 pb-1 text-dark text-center">
      <div class="container">
        <div class="row mb-6">
          <div class="col-md-9 mx-auto mt-0">
            <div>
              <h2 class="pb-4 font-size-35">You're Almost Home</h2>
            </div>
            <p class="text-darkslategrey pb-5 text-secondary font-size-16">
              Lorem Ipsum is simply dummy text of the printing and typesetting industry. There are
              many variations of passages of Lorem Ipsum available, but the majority have suffered
              alteration in some form, by injected humour.
            </p>
          </div>
        </div>
        <div class="row mb-0">
          <div class="col-md-6 mt-0 mb-4">
            <img alt class="mw-100" src="~@/assets/images/home/1.png" />
          </div>
          <div class="col-md-6 mt-0 mb-4">
            <img alt class="mw-100" src="~@/assets/images/home/2.png" />
          </div>
          <div class="col-md-6 mt-0 mb-4">
            <img alt class="mw-100" src="~@/assets/images/home/3.png" />
          </div>
          <div class="col-md-6 mt-0 mb-4">
            <img alt class="mw-100" src="~@/assets/images/home/4.png" />
          </div>
          <div class="col-md-6 mt-0 mb-4">
            <img alt class="mw-100" src="~@/assets/images/home/5.png" />
          </div>
          <div class="col-md-6 mt-0 mb-4">
            <img alt class="mw-100" src="~@/assets/images/home/6.png" />
          </div>
        </div>
        <div class="d-block text-center py-5">
          <button
            class="btn btn-lg rounded text-bisque btn-warning font-size-16 pe-4 ps-4 pt-2 pb-2"
          >
            查看更多
          </button>
        </div>
      </div>
    </section>
    <section class="bg-midnightblue py-5 text-white">
      <div class="container">
        <div class="text-center">
          <h2 class="font-size-28 mb-5">Properties</h2>
        </div>
        <div class="row text-warning justify-content-center">
          <div class="col-md-3 offset-md-2 mt-1 ms-5">
            <div>
              <h2 class="font-size-18 text-center mb-3 pe-5 me-5" style="display: flex">
                LOREM IPSUM
              </h2>
            </div>
            <p class="text-secondary font-size-17 text-left pe-2 ms-0 me-1">
              Lorem Ipsum is simply dummy text of the printing and typesetting industry.
            </p>
          </div>
          <div class="col-md-3 offset-md-2 mt-1 ms-5">
            <div>
              <h2 class="font-size-18 text-center mb-3 pe-5 me-5" style="display: flex">
                LOREM IPSUM
              </h2>
            </div>
            <p class="text-secondary font-size-17 text-left pe-2 ms-0 me-1">
              Lorem Ipsum is simply dummy text of the printing and typesetting industry.
            </p>
          </div>
          <div class="col-md-3 offset-md-1 mt-0 me-5 ms-5">
            <div class="pe-3">
              <h2 class="font-size-18 text-center mb-3 pe-5 me-5 d-flex">LOREM IPSUM</h2>
            </div>
            <p class="text-secondary font-size-17 text-left">
              Lorem Ipsum is simply dummy text of the printing and typesetting industry.
            </p>
          </div>
        </div>
      </div>
    </section>
    <section class="bg-white pt-5 text-dark text-center" style="padding-bottom: 161px">
      <div class="container">
        <div class="row mb-5">
          <div class="mx-auto col-md-9 mt-0 pb-4">
            <div>
              <h2 class="mb-5 font-size-35">You're Almost Home</h2>
            </div>
            <p class="text-secondary font-size-16">
              Lorem Ipsum is simply dummy text of the printing and typesetting industry. There are
              many variations of passages of Lorem Ipsum available, but the majority have suffered
              atteration in some form, by injected humour.
            </p>
          </div>
        </div>
        <div class="row mb-0 text-secondary">
          <div class="ms-auto col-md-3 mt-1">
            <div class="text-warning mb-2">
              <i class="fa fa-home text-warning font-size-37"> </i>
            </div>
            <div>
              <p class="font-size-17 text-black"><b> LOREM IPSUM </b></p>
            </div>
            <p class="font-size-16">Lorem Ipsum is simply dummy text of the printing.</p>
          </div>
          <div class="col-md-3 mt-1">
            <div class="pb-2">
              <img alt class="mw-100" src="@/assets/images/home/chart.png" />
            </div>
            <div>
              <p class="font-size-17 text-black"><b> LOREM IPSUM </b></p>
            </div>
            <p class="font-size-16">Lorem Ipsum is simply dummy text of the printing.</p>
          </div>
          <div class="me-auto col-md-3 mt-0">
            <div class="text-warning pb-2">
              <i class="fa fa-building text-warning font-size-46"> </i>
            </div>
            <div>
              <p class="font-size-17 text-black"><b> LOREM IPSUM </b></p>
            </div>
            <p class="font-size-16">Lorem Ipsum is simply dummy text of the printing.</p>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>
<script>
import heroImage from '@/assets/images/home/hero.jpg'
import { mapGetters } from 'vuex'
import { ElMessage } from 'element-plus';

export default {
  name: 'Home',
  data() {
    return { heroImage }
  },
  computed: {
    ...mapGetters(['isLogin', 'userInfo']),
  },
  methods: {
    showLoginModal() {
      this.$store.commit('showLogin', true)
    },
    onLogout() {
      console.log('logout')
      this.$store.commit('logout')
      ElMessage({
        message: '退出登录成功',
        type: 'success',
      })
    },
    toAIPage() {
      console.log('this.$router: ', this.$router);
      this.$router.push('/ai_creator')
    },
  },
  created() {},
}
</script>
<style src="./Home.less"></style>
